<template>
  <div class="app-container">
    <el-input v-model="labelName" class="inline-input" size="small" />
    <el-button
      type="primary"
      icon="el-icon-search"
      round
      size="mini"
      class="add-btn"
      @click="handleClickSearch"
      >搜索</el-button
    >
    <el-table
      v-loading="listLoading"
      :data="pageInfo.records"
      element-loading-text="加载中......"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="标签名">
        <template slot-scope="scope">
          <span v-html="scope.row.name"></span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope"
          ><i class="el-icon-time" /> {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-link"
            @click="handleClickToImage(scope.row.name)"
            >对应图片集合
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-delete"
            @click="handleClickDel(scope.row.id)"
            >删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :hide-on-single-page="true"
      :current-page="pageInfo.current"
      :page-size="pageInfo.size"
      layout="total, prev, pager, next, jumper"
      :total="pageInfo.total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getPageLabelsApi, delLabelByIdApi } from "@/api/label";

export default {
  data() {
    return {
      pageInfo: { size: 10, current: 1, total: 0, records: [] },
      listLoading: true,
      labelName: "",
    };
  },
  created() {
    this.fetchLabels();
  },
  methods: {
    fetchLabels() {
      this.listLoading = true;
      const params = {
        page: this.pageInfo.current,
        limit: this.pageInfo.size,
      };
      if (this.labelName !== "") {
        params.labelName = this.labelName;
      }
      getPageLabelsApi(params).then((res) => {
        this.pageInfo = res.data;
        this.listLoading = false;
      });
    },
    handleCurrentChange(page) {
      this.pageInfo.current = page;
      this.fetchLabels();
    },
    handleClickDel(commentId) {
      this.$confirm("确认删除该标签？该标签下所有图片都会被删除").then(
        (val) => {
          delLabelByIdApi(commentId).then((_) => {
            this.$notify.success({
              title: "提示",
              message: "评论删除成功",
            });
            this.fetchLabels();
          });
        }
      );
    },
    handleClickToImage(labelName) {
      this.$router.push({
        path: "/image/images",
        query: {
          labelName: labelName,
        },
      });
    },
    handleClickSearch() {
      this.fetchLabels();
    },
  },
};
</script>

<style scoped>
.add-btn {
  margin-bottom: 10px;
}
.el-link {
  font-size: 12px;
  margin-left: 4px;
}
.el-link:hover {
  font-weight: bold;
}
.inline-input {
  margin: 0 20px;
  width: 400px;
}
</style>

